import React, { useState, useCallback, useEffect } from "react";
import './App.css'
import Header from './component/Header'
import AddInput from './component/AddInput'
import TodoItem from "./component/todoItem";
import CheckModal from './component/Modal/checkModal'
import EditModal from "./component/Modal/editModal";
import NoDataTip from './component/NoDataTip';

function App() {

    // state管理
    const [isShow, setIsShow] = useState(false),
        [todoList, setTodoList] = useState([]),
        [isShowModal, setIsShowModal] = useState(false),
        [isShowEditModal, setIsShowEditModal] = useState(false),
        [currentData, setCurrentData] = useState({});

    // 存入数据到localStorage
    useEffect(() => {
        const todoData = JSON.parse(localStorage.getItem("todoData") || '[]');
        setTodoList(todoData);
    }, []);
    // 取出数据
    useEffect(() => {
        localStorage.setItem("todoData", JSON.stringify(todoList));
    }, [todoList]);


    // 打开input框
    const openInput = () => {
        setIsShow(
            isShow => true
        )
    }
    // 新增代办事项
    const addItem = useCallback((value) => {
        const dataItem = {
            id: new Date().getTime(),
            content: value,
            completed: false,
        };
        setTodoList((todoList) => [...todoList, dataItem]);
        setIsShow(false);
    }, []);

    // 打开 查看
    // 要缓存从子组件过来的属性，让子组件不要重复渲染
    const openCheckModal = useCallback((id) => {
       // 要缓存从子组件过来的属性，让子组件不要重复渲染
        setCurrentData(() => todoList.filter(item => item.id = id)[0]);
        setIsShowModal(true);
    }, [todoList])

    // 打开edit
    const openEditModal = useCallback((id) => {
        setCurrentData(() => todoList.filter((item) => item.id === id)[0]);
        setIsShowEditModal(true);
    }, [todoList]);
    // 提交edit
    const submitEdit = useCallback((newData, id) => {
        setTodoList((todoList) => {
            todoList.map((item) => {
                if (item.id === id) {
                    item = newData;
                }
                return item;
            })
        });
        setIsShowEditModal(false);
    }, []);

    // 删除
    const removeItem = useCallback((id) => {
        setTodoList((todoList) => {
            todoList.filter(item => item.id !== id);
        })
    }, [])
    // 修改完成状态
    const completedItem = useCallback((id) => {
        console.log(1)
        setTodoList((todoList) => {
            todoList.map((item) => {
                if (item.id === id) {
                    item.completed = !item.completed;
                }
                return item
            })
        })
    }, [])

    return (

        <div className="App">
            <CheckModal
                isShowCheckModal={isShowModal}
                closeModal={() => { setIsShowModal(false) }}
                data={currentData}
            />
            <EditModal
                isShowEditModal={isShowEditModal}
                data={currentData}
                submitEdit={submitEdit}
                openEditModal={openEditModal}
            />
            <Header openInput={openInput} />
            <AddInput
                isShow={isShow}
                addItem={addItem}
            />

            {todoList.length === 0 ?
                (
                    <NoDataTip />
                )
                : (
                    <ul className="todo-list">
                        {todoList.map((item, index) => {
                            return (
                                <TodoItem
                                    key={index}
                                    data={item}
                                    openCheckModal={openCheckModal}
                                    openEditModal={openEditModal}
                                    completedItem={completedItem}
                                    removeItem={removeItem}
                                />
                            );
                        })}
                    </ul>
                )}
        </div>
    );
}

export default App

